import './index.css'
import React, {useEffect} from 'react';
import {Particle} from "../../../utils/SpecialEffects";
import {Button} from "antd";
import MyInput from "@/components/Input/index.tsx"
import {useNavigate} from 'react-router-dom'

const Login = () => {
    let particles = [];
    const navigate = useNavigate()
    const onLogin = () => {
        navigate('/app1')
    };
    useEffect(()=>{
        const dom = document.querySelector('.box');
        const interval =  setInterval(()=>{
             particles.push(new Particle(dom,{
                 x:Math.random()*window.innerWidth,
                 y:window.innerHeight,
             },1 + Math.random() * 3))
         },200)
        function update() {
            particles = particles.filter(function (p) {
                return p.move();
            });
            requestAnimationFrame(update.bind(this));
        }
        update();
        return ()=>{
            clearInterval(interval)
        }
    },[])
  return (
      <div className="box">
          <div className="ring">
              <i></i>
              <i></i>
              <i></i>
              <div className="login">
                  <h2>Login</h2>
                  <MyInput label="账号"/>
                  <MyInput label="密码"/>
                  <div style={{display:"flex",alignItems:'center',justifyContent:'center'}}>
                      <Button type="primary" onClick={onLogin}>登录</Button>
                  </div>
              </div>
          </div>
      </div>
  )
}
export default Login